<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索表单设置 -->
		<el-form :inline="true" :model="queryInfo" style="margin-top:20px;">
			<!-- 按钮组 -->
			<el-form-item label="状态:">
				<el-button-group class="zt">
					<el-button @click="querySearchShopGoodsList">全部商品</el-button>
					<el-button>上架中</el-button>
					<el-button>已下架</el-button>
				</el-button-group>
			</el-form-item>
			<el-form-item label="商品名称:">
				<el-input v-model="queryInfo.goodsName" placeholder="请输入商品名称"></el-input>
			</el-form-item>
			<el-form-item label="所属门店:">
				<el-input v-model="queryInfo.shopName" placeholder="请输入所属门店"></el-input>
			</el-form-item>
			<el-form-item label="发布日期:">
				<el-date-picker v-model="date" type="daterange" unlink-panels range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="querySearchShopGoodsList">查询</el-button>
			</el-form-item>
		</el-form>
		<!-- 新增商品-->
		<el-row style="margin-top: 10px;margin-bottom: 10px;">
			<el-button type="primary" size="medium">新增商品</el-button>
		</el-row>
		<!-- 表格展示数据 -->
		<el-table :data="shopGoodsList" border style="width: 100%" :cell-style="{'text-align':'center'}"
			:header-cell-style="{'text-align':'center',fontSize:'14px',backgroundColor: '#55ffff',color:'#f3167f'}">
			<el-table-column prop="goodsId" label="商品ID">
			</el-table-column>
			<el-table-column prop="goodsName" label="商品名称">
			</el-table-column>
			<el-table-column prop="goodsShopName" label="所属门店">
			</el-table-column>
			<el-table-column prop="goodsSalesVolume" label="销量">
			</el-table-column>
			<el-table-column prop="goodsPresentPrice" label="预估价">
			</el-table-column>
			<el-table-column prop="addTime" label="发布时间">
			</el-table-column>
			<el-table-column prop="goodsStatus" label="状态">
				<template slot-scope="scope">
					<el-link :underline="false" type="danger" v-if="scope.row.goodsStatus==0">下架中</el-link>
					<el-link :underline="false" type="primary" v-else>上架中</el-link>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-link :underline="false" type="primary" v-if="scope.row.goodsStatus==0"
						@click="ch(scope.row)">上架</el-link>
					<el-link :underline="false" type="danger" v-else @click="ch(scope.row)">下架</el-link>
					&nbsp;&nbsp;
					<el-link :underline="false" type="primary">编辑商品</el-link>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页数据展示 -->
		<el-row class="block" style="margin-top:10px ;">
			<!-- current-change选择页码时触发的事件，size-change页面展示条数发生变化时，触发的事件-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: { //
					pageNum: 1,
					pageSize: 10,
					goodsName: '',
					goodsStatus: '',
					shopName: '',
					startTime: '',
					endTime: ''
				},
				total: 1,
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}],
				},
				date: '',
				//
				shopGoodsList: [],
				commodity: {
					addTime: "",
					goodsCartCount: '',
					goodsId: '',
					goodsImage: "",
					goodsName: "",
					goodsPresentPrice: '',
					goodsSalesVolume: '',
					goodsShopName: "",
					goodsStatus: '',
					goodsUnit: "",
					shopCategoryId: '',
					shopId: '',
				},
				title: '',
			}
		},
		methods: {
			//状态
			ch(row) {
				if (row.goodsStatus == 1) {
					this.$http.post('goods/modifyShopGoods', {
							goodsId: row.goodsId,
							goodsStatus: 0
						})
						.then(res => {
							if (res.data.status == 200) {
								row.goodsStatus = 0
							} else {
								this.$message.error('接口数据异常！')
							}
						})
				} else {
					this.$http.post('goods/modifyShopGoods', {
							goodsId: row.goodsId,
							goodsStatus: 1
						})
						.then(res => {
							if (res.data.status == 200) {
								row.goodsStatus = 1
							} else {
								this.$message.error('接口数据异常！')
							}
						})
				}
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize = val;
				this.queryInfo.pageNum = 1;
				this.querySearchShopGoodsList();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum = val;
				this.querySearchShopGoodsList();
			},
			//查询
			querySearchShopGoodsList() {
				this.$http.get('goods/querySearchShopGoodsList', {
						params: this.queryInfo
					})
					.then(res => {
						if (res.data.status == 200) {
							this.shopGoodsList = res.data.data.list
							this.total = res.data.data.total
						} else {
							this.$message.error('接口数据异常！')
						}
					})
			}
		},
		mounted() {
			this.querySearchShopGoodsList()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
				}
			},
			// address() {
			// 	this.shop.shopProvince = this.address[0];
			// 	this.shop.shopCity = this.address[1];
			// 	this.shop.shopDistrict = this.address[2];
			// }
		}
	}
</script>

<style scoped>
	.zt .el-button:hover {
		background-color: blue;
	}
</style>